<template>
  <div class="cards">
    <el-card class="box-card" shadow="hover" v-for="(l, i) in list" :key="i">
      <template #header>
        <div class="card-header">
          {{ l.name }}
        </div>
      </template>
      <div class="content">
        <div class="right">
          <p>类型 ： {{ l.type.text }}</p>
          <p>原价 ： ￥{{ l.price }}</p>
          <p>折扣 ： {{ l.discount }} 折</p>
          <p>折扣价 ：￥{{ ((l.price * l.discount) / 10).toFixed(1) }}</p>
          <el-button type="primary" size="small" @click="addtocart(l)"
            >加入购物车</el-button
          >
          <el-button type="success" size="small" @click="buynow(l)"
            >立即购买</el-button
          >
        </div>
        <img :src="l.img" alt="" />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
interface StyleObj {
  //冒红只能先这样了，不影响展示
  name: string;
  type: object;
  price: [string, Number];
  discount: [string, Number];
  img: string;
}
defineProps({
  list: Array<StyleObj>,
});
const goodsList: any = ref([]);
const $emit = defineEmits(["addtocart", "buynow"]); //$emit名字可以随便取
const addtocart = (v: any) => {
  $emit("addtocart", v);
};
const buynow = (v: any) => {
  $emit("buynow", v);
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .box-card {
    margin: 10px;
    width: 30%;
    .card-header {
      font-weight: bold;
    }
    .content {
      display: flex;
      justify-content: space-between;
      .right {
        p:last-of-type {
          margin-bottom: 40px;
        }
      }
      img {
        width: 200px;
        // height: 200px;
      }
    }
  }
}
</style>
